<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>供应大厅</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../style/free.css">
</head>

<body>
    <div id="app" v-cloak>
        <el-row>
            <!-- 筛选器 -->
            <el-col :xs="24" class="border-bottom border-light">
                <div class="bg-white flex shadow" style="height: 80rem;">
                    <div class="w-100 font flex" style="line-height: 80rem;">
                        <span @click="handleChange(item)" class="flex-shrink text-ellipsis text-center" style="width: 20%;" v-for="(item, index) in category.filter((i,id) => id < 5)" :key="index"
                            :class="{ 'text-success': isActive == item.Category_SerialNumber,'text-dark':isActive != item.Category_SerialNumber }">{{item.Category_Name}}</span>
                    </div>
                    <div @click="drawer = !drawer" class="flex-shrink h2 mx-2" style="line-height: 80rem;" v-if="category.length > 5">
                        <i class="el-icon-menu text-dark"></i>
                    </div>
                    <el-drawer :visible.sync="drawer" direction="ttb" :show-close="false">
                        <div class="w-100 flex flex-wrap pb-2">
                            <div @click="handleChange(item)" class="mt-2 ml-2 px-2 py-1 rounded-circle flex-shrink text-center border border-success" v-for="(item, index) in category" :key="index" 
                                :class="{ 'text-success': isActive == item.Category_SerialNumber,'text-dark':isActive != item.Category_SerialNumber  }">
                                <span>{{item.Category_Name}}</span>
                            </div>
                        </div>
                    </el-drawer>
                </div>
            </el-col>
            <!-- 列表 -->
            <el-col :xs="24">
                <div class="w-100" style="height:calc(100vh - 82rem);overflow-y: auto;" @scroll="handleScroll">
                    <div @click="handleDetail(item)" v-for="(item, index) in tableData" :key="index" class="m-2 flex flex-column rounded-lg bg-white shadow">
                        <div class="py-2 flex align-center justify-center">
                            <div style="width: 200rem;height: 200rem;" class="ml-2 flex-shrink overflow-hidden rounded-lg flex align-center border border-success">
                                <el-image class="w-100" :src="imageApi + item.Picture_URL" fit="contain">
                                    <div slot="error" class="bg-light flex justify-center align-center" style="width: 200rem;height: 200rem;">
                                        <i class=" el-icon-picture text-muted" style="font-size: 120rem;"></i>
                                    </div>
                                </el-image>
                            </div>
                            <div class="w-100 mx-2">
                                <div class="font text-ellipsis w-100" style="line-height: 50rem;">
                                    <span>商品名称：</span>
                                    <span class="font">{{ item.Article_Name }}</span>
                                </div>
                                <div class="font text-ellipsis w-100" style="line-height: 50rem;">
                                    <span>报价情况：</span>
                                    <span class="font-md text-danger">{{ item.Unit_Price }}</span>
                                </div>
                                <div class="font-sm text-ellipsis w-100" style="line-height: 50rem;">
                                    <span>供应量：</span>
                                    <span>{{ item.Total_Quantity }}</span>
                                </div>
                                <div class="font-sm text-ellipsis w-100 text-muted"  style="line-height: 50rem;">
                                    <span>剩余量：</span>
                                    <span>{{ item.Remain_Quantity }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="mx-2 mb-2 font-sm text-hover-primary text-ellipsis">
                            <span>所属企业：</span>
                            <span class="font-sm">{{ item.Enterprise_Name }}</span>
                        </div>
			        </div>                   
                    <div class="font-sm text-muted text-center mb-2" v-show="tableData.length == total">
                        <el-empty v-show="tableData.length == 0" description="暂无更多数据"></el-empty>
                        <span v-show="tableData.length != 0">暂无更多数据</span>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../utils/jweixin.js"></script>
    <script type="text/javascript" src="../../../utils/components.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="../../../utils/http.js"></script>
    <script type="text/javascript" src="js/components.js"></script>
    <script type="text/javascript" src="js/supply.js"></script>
</body>

</html>